<template>
  <div class="article">
    <mt-header title="图书馆">
      <mt-button icon="back" slot="left" @click="goback">返回</mt-button>
    </mt-header>
    <swiper loop auto :list="slide_list" :index="slide_index" @on-index-change="slide_onIndexChange" dots-position="center"></swiper>
    <div class="page-loadmore">
      <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff"></mt-spinner>
        <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom"
          @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="page-loadmore-list" v-if="list>0">
            <li v-for="(item,index) in articleList" :key="index" class="page-loadmore-listitem">
              <img class="article-list-img" :src="item.cover" alt="">
              <!-- 根据id跳转。直接添加在父级上 -->
              <router-link class="router" :to="{path:'/Article/ArticleDetail',query:{id:item.id}}">
                <div class="article-list-content">
                  <p class="list-content-tt">{{item.title}}</p>
                  <p class="list-content-intro">{{item.description}}</p>
                  <div class="list-content-time ">
                    <p class="list-content-time">{{item.updateTime|date}}</p>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
          <div slot="top" class="mint-loadmore-top" style="text-align:center">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
          </div>
          <load-more v-if="allLoaded" :show-loading="false" :tip="$t('无更多内容了')" background-color="#fbf9fe"></load-more>
          <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
            <span v-show="bottomStatus === 'loading'">
              <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
            </span>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Swiper,
    GroupTitle,
    SwiperItem,
    XButton,
    Divider,
    LoadMore
  } from "vux";
  import {
    log
  } from 'util';
  import {
    getAriticleList_Axios,
    getAriticleBanner_Axios
  } from './axios/api';
  export default {
    components: {
      Swiper,
      SwiperItem,
      GroupTitle,
      XButton,
      Divider,
      LoadMore
    },
    data() {
      return {
        //轮播图
        slide_list: [],
        slide_index: 0,
        //上拉加载
        pageNum: 0, //页码
        InitialLoading: true, //初始加载
        list: 10, //数据
        allLoaded: false, //数据是否加载完毕
        bottomStatus: "", //底部上拉加载状态
        wrapperHeight: 0, //容器高度
        topStatus: "", //顶部下拉加载状态
        translate: 0, //
        moveTranslate: 0,
        // url: "http://122.152.216.183:8092/articles",
        totalPage: 0,
        articleList: [],

      };
    },
    mounted() {
      let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
      if (windowWidth > 768) {
        //这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 130;
      } else {
        this.wrapperHeight = document.documentElement.clientHeight - 90;
      }
      this.getBanner();
      this.getArticleList();
    },
    methods: {
      //轮播图
      slide_onIndexChange(index) {
        this.slide_index = index; //显示序号
      },
      //上拉加载
      handleBottomChange(status) {
        this.moveTranslate = 1;
        this.bottomStatus = status;
      },
      loadBottom() {
        this.handleBottomChange("loading"); //上拉时 改变状态码
        this.pageNum += 1;
        setTimeout(() => {
          //上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
          if (this.pageNum < this.totalPage) {
            //最多下拉
            this.list += 10; //上拉加载 每次数值加10
          } else {
            this.allLoaded = true; //模拟数据加载完毕 禁用上拉加载
          }
          this.getArticleList(this.list); //传list参数，重新获取数据
          this.handleBottomChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onBottomLoaded();
        }, 500);
      },
      handleTopChange(status) {
        this.moveTranslate = 1;
        this.topStatus = status;
      },
      translateChange(translate) {
        const translateNum = +translate;
        this.translate = translateNum.toFixed(2);
        this.moveTranslate = (1 + translateNum / 70).toFixed(2);
      },
      //下拉刷新
      loadTop() {
        this.handleTopChange("loading"); //下拉时 改变状态码
        this.allLoaded = false; //下拉刷新时解除上拉加载的禁用
        setTimeout(() => {
          this.getArticleList(this.list);
          this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onTopLoaded();
        }, 500);
      },
      //获取文章列表
      getArticleList: function (size) {
        getAriticleList_Axios(size).then(res => {
          console.log('res', res);
          if ((res.status = 200 && res.data.status == 0)) {
            this.articleList = res.data.data.content;
            if (this.totalPage == 0) {
              this.totalPage = res.data.data.totalPages;
              console.log('this.totalPage', this.totalPage);
            }
          }
        }).catch(err => {
          console.log('请求失败', err);
        })
      },
      //获取文章banner图
      getBanner: function () {
        getAriticleBanner_Axios().then(res => {
          console.log("getbanner图", res.data.data);
          if (res.data.status == 0) {
            let bannerList = res.data.data;
            this.slide_list = bannerList.map((item, index) => ({
              url: item.forward, //点击图片跳转链接
              img: item.url
            }));
          }
        }).catch(err => {
          console.log('请求失败', err)
        })
      }
    }
  };

</script>

<style lang="scss" scoped>
  .page-title,
  .page-footer {
    text-align: center;
    position: absolute;
  }

  .page-title {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .page-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .page-title+* {
    margin-top: 50px;
  }

  @media (min-width: 768px) {
    .page-title {
      height: 90px;
      line-height: 90px;
    }
    .page-title+* {
      margin-top: 90px;
    }
  }

  .page-loadmore-listitem {
    display: flex;
    height: 10rem;
    line-height: 10rem;
    align-items: center;
  }

  .page-loadmore-listitem {
    border-bottom: 8px solid #fbf3d0;
    position: relative;
  }

  .page-loadmore-wrapper {
    overflow: scroll;
    text-align: center;
  }

  .page-loadmore-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    position: relative;
  } //文章列表图片
  .article-list-img {
    width: 7rem;
    height: 7rem;
    margin: 1.5rem;
    flex: 1
  }

  .router {
    flex: 3;
  }

  .article-list-content {
    // display: flex;
    // flex-direction: column;
    margin: 1.5rem 0.5rem 1.5rem 0rem;
    .list-content-tt {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.4rem;
      font-weight: 600;
      padding-bottom: 0.5rem;
    }
    .list-content-intro {
      word-wrap: break-word;
      line-height: 2rem;
      text-align: left;
      font-size: 1.2rem;

      color: #bababa;
    }
    .list-content-time {
      position: absolute;
      display: flex;
      justify-content: flex-end;
      white-space: nowrap;
      align-items: center;
      flex: 1;
      line-height: 2rem;
      text-align: right;
      font-size: 1.2rem;
      color: #bababa;
      right: 5px;
      bottom: 2px;
      img {
        width: 2rem;
        height: 2rem;
        margin-left: 0.5rem;

      }
    }
  }

</style>
